<template>
  <div class="department-manage-container">
    <el-table
      v-loading="departmentStore.loading"
      :data="departmentStore.departmentList"
      element-loading-text="加载中..."
      row-key="selfid"
      border
      default-expand-all
      :tree-props="{ children: 'childs', hasChildren: 'hasChildren' }"
    >
      <OrganizationNameColumn />
      <el-table-column prop="type" label="组织类型" width="300">
        <template #default="{ row }">
          {{ getOrgType(row) }}
        </template>
      </el-table-column>
      <el-table-column prop="memberCount" label="员工数" width="200">
        <template #default="{ row }">
          {{ row.employee_nums || "0" }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="manager" label="负责人" width="120">
        <template #default="{ row }">
          {{ row.manager || "--" }}
        </template>
      </el-table-column>
      <el-table-column prop="leader" label="分管领导" width="120">
        <template #default="{ row }">
          {{ row.leader || "--" }}
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="300" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" link @click="handleAddSub(row)">
            新增下级
          </el-button>
          <el-button v-if="row.selfid!='0'" type="primary" link @click="handleEdit(row)">
            编辑
          </el-button>
          <el-button v-if="row.selfid!='0'" type="danger" link @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑弹窗 -->
    <DepartmentDialog
      v-model:visible="dialogVisible"
      :is-edit="isEdit"
      :parent-dept="currentParent"
      :edit-data="currentRow"
      @submit="handleDialogSubmit"
    />

    <!-- 删除确认弹窗 -->
    <el-dialog
      v-model="deleteDialogVisible"
      title="提示"
      width="400px"
      class="delete-dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="delete-content">
        <div class="warning-icon">
          <el-icon :size="24" color="#ff4d4f">
            <WarningFilled />
          </el-icon>
        </div>
        <div class="delete-text">
          <div class="warning-title">是否确认删除以下组织？</div>
          <div class="delete-info">
            <div class="info-item">
              <span class="label">组织名称：</span>
              <span class="value">{{ deleteData?.dept_name }}</span>
            </div>
            <div class="info-item">
              <span class="label">组织编码：</span>
              <span class="value">{{ deleteData?.selfid }}</span>
            </div>
          </div>
          <div class="warning-desc">删除后将无法恢复，请谨慎操作</div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取 消</el-button>
          <el-button type="danger" @click="confirmDelete">确认删除</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useDepartmentStore } from "@/stores/department";
import type { DepartmentItem } from "@/api/types/department";
import OrganizationNameColumn from "@/components/OrganizationNameColumn.vue";
import DepartmentDialog from "@/components/DepartmentDialog.vue";
import { WarningFilled } from "@element-plus/icons-vue";

const departmentStore = useDepartmentStore();

// 弹窗相关
const dialogVisible = ref(false);
const isEdit = ref(false);
const currentParent = ref<DepartmentItem>();
const currentRow = ref<DepartmentItem>();

// 删除弹窗相关
const deleteDialogVisible = ref(false);
const deleteData = ref<DepartmentItem>();

// 获取组织类型
const getOrgType = (row: DepartmentItem) => {
  if (row.pid === -1) return "公司";
  if (row.pid === 0) return "部门";
  return "--";
};

// 新增下级
const handleAddSub = (row: DepartmentItem) => {
  isEdit.value = false;
  currentParent.value = row;
  dialogVisible.value = true;
};

// 编辑
const handleEdit = (row: DepartmentItem) => {
  isEdit.value = true;
  currentRow.value = row;
  dialogVisible.value = true;
};

// 删除
const handleDelete = (row: DepartmentItem) => {
  deleteData.value = row;
  deleteDialogVisible.value = true;
};

// 确认删除
const confirmDelete = async () => {
  if (!deleteData.value) return;

  await departmentStore.deleteDepartment(deleteData.value.selfid);
  deleteDialogVisible.value = false;
};

// 处理弹窗提交
const handleDialogSubmit = async (data: Partial<DepartmentItem>) => {
  if (isEdit.value) {
    await departmentStore.updateDepartment(data);
  } else {
    await departmentStore.addDepartment(data);
  }
  dialogVisible.value = false;
};

// 初始化数据
onMounted(() => {
  departmentStore.fetchDepartmentList();
});
</script>

<style lang="scss" scoped>
.department-manage-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;

  :deep(.el-table__row) {
    .cell {
      white-space: nowrap;
    }
  }
}

.delete-dialog {
  :deep(.el-dialog__header) {
    margin-right: 0;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;

    .el-dialog__title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  :deep(.el-dialog__body) {
    padding: 24px;
  }

  :deep(.el-dialog__footer) {
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
  }

  .delete-content {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    .warning-icon {
      padding-top: 4px;
    }

    .delete-text {
      flex: 1;

      .warning-title {
        font-size: 16px;
        font-weight: 500;
        color: #303133;
        margin-bottom: 16px;
      }

      .delete-info {
        background-color: #fafafa;
        border-radius: 4px;
        padding: 12px 16px;
        margin-bottom: 12px;

        .info-item {
          line-height: 24px;
          display: flex;
          align-items: center;

          .label {
            color: #606266;
            margin-right: 8px;
            min-width: 70px;
          }

          .value {
            color: #303133;
            font-weight: 500;
          }
        }
      }

      .warning-desc {
        color: #ff4d4f;
        font-size: 12px;
      }
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;

    .el-button {
      padding: 8px 20px;
      min-width: 88px;
    }
  }
}
</style>
